<template lang="pug">
  .card(:class="{ cardActive: isActive }")
    .card--meta
      img.card--favicon(:src="'https://www.google.com/s2/favicons?domain=' + resource.url" aria-hidden="true")
      a.card--title(:href="resource.url" :target='resource.title' rel='noreferrer') {{resource.title}}
    p.card--description {{resource.desc}}
    .card--links
      a.card--reference(@click='createCopyUrl(resource)') Copy
      br
      a.card--target(:href="resource.url" :target='resource.title' rel='noreferrer') Open
</template>

<script>
export default {
  props: {
    resource: Object,
    isActive: Boolean,
    createCopyUrl: Function,
  },
}
</script>


<style lang="scss" scoped>
.card {
  background: #2D3748;
  border-radius: .3rem;
  padding: 1rem;
  transition: .2s ease-in-out;
  display: flex;
  flex-direction: column;
  position: relative;

  &Active {
    box-shadow:inset 0px 0px 0px 3px #08e5ff;
  }

  &--meta {
    display: flex;
    justify-content: flex-start;
  }

  &--favicon {
    height: 16px;
    width: 16px;
    margin-top: 0.3rem;
    margin-right: 0.5rem;

  }

  &--reference {
    cursor: pointer;
    display: flex;
  }

  &--target {
    cursor: pointer;
    display: flex;
  }

  &--links {
    display:flex;
    justify-content:flex-end;

    img {
      width: 1rem;
      margin-left: .5rem;
    }
  }

  &--title { 
    font-size: 16px !important;
    font-weight: 600;
    margin: 0 !important;
  }

  &--description {
    display: flex;
    align-content: stretch;
    flex: 1 1 auto;
    flex-direction: column;
    font-size: 13px;
    color: white;
    margin: .7rem 0 .7rem 0;
    line-height: 1.3;
    letter-spacing: .5px;
    max-width: 15rem;
  }
  a {
    font-size: 12px;
    line-height: 1;
    align-self: flex-end;
    margin-left: 1.7rem;

    &:hover::before {
      opacity: .5;
    }
  }
  &--reference {
    &::before {
      align-self: flex-start;
      padding-right: 0.2rem;
      height: .9rem;
      width: .9rem;
      margin-top: -.1rem;
      content: url('');
    }
  }
  &--target {
    &::before {
      align-self: flex-start;
      padding-right: 0.2rem;
      height: .9rem;
      width: .9rem;
      margin-top: -.1rem;
      content: url('');
    }
  }
}
</style>
